<template>
  <div class="outer-box">
    <TitleItem iconName="jiangzhang" :hasBefore="false" :hasWhiteLine="true">科研成果</TitleItem>
      <div class="boder-box">
         <div class="tech-board">
        <div class="box1 hover-animate flex"><div class="img"></div></div>
        <div class="box2 hover-animate flex"><div class="text">国家重点基础研究发展计划（973计划）</div></div>
        <div class="box3 hover-animate flex"><div class="text">2018年首次在《Science》主刊上以第一单位发表研究论文</div></div>
        <div class="box4 hover-animate flex"><div class="text">累计承担“863”计划、“国家重点研发计划”等1326项</div></div>
        <div class="box5 hover-animate flex"><div class="text">国家和省部级科技成果奖516项，其中包括国家自然科学奖、技术发明奖、科技进步奖等42项</div></div>
        <div class="box6 hover-animate flex"><div class="text">1978-2014年获得多个国家科技奖</div></div>
        <div class="box7 hover-animate flex"><div class="text">2008-2018年我校获得多个行业科技奖</div></div>
        
        <div class="second">
            <div class="text box1 box">
                <div class="front box11 text">国家重点实验室（培育基地）（1个）</div>
                <div class="back box11 text">煤科学与技术省部共建国家重点实验室</div>
            </div>
            <div class="text box2 box">
                <div class="front box22">国家国际科技合作基地（1个）</div>
                <div class="back box22">煤炭资源清洁高效可持续开发与利用国际联合研究中心</div>
            </div>
            <div class="text box3 box">
                <div class="front box33 text">省部共建协同创新中心（1个）</div>
                <div class="back box33 text">煤及煤层气绿色清洁开发利用省部共建协同创新中心</div>
            </div>
            <div class="text box4 box">
                <div class="front box44 text">国家地方联合工程实验室/研究中心（4个）</div>
                <div class="back box44 text" style="font-size:10px">半导体照明国家地方联合工程研究中心/
                矿山流体控制国家地方联合工程实验室/
                矿用智能电器技术国家地方联合工程实验室/
                新型煤焦化产业技术产业技术国家地方联合工程研究中心 </div>
            </div>
            <div class="text box5 box">
                <div class="front box55 text">教育部重点实验室（4个）</div>
                <div class="back box55 text">煤科学与技术教育部和山西省重点实验室/
                新型传感器与智能控制教育部重点实验室/
                材料界面科学与工程教育部重点实验室/
                原位改性采矿省部共建教育部重点实验室
                </div>
            </div>
            <div class="text box6 box">
                <div class="front box66 text">国家国防科技工业实验室（1个）</div>
                <div class="back box66 text">高分辨率对地观测系统山西数据与应用中心</div>
            </div>
            <div class="text box7 box">
                <div class= "front box77 text">教育部工程研究中心（2个）</div>
                <div class="back box77 text">教育部煤转化技术工程研究中心/
                先进金属复合材料成型技术与装备教育部工程技术研究中心
                </div>
            </div>
        </div>
    </div>
    </div>
 </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.outer-box{
    width: 730px * @topx;
    height: 457px * @topx;
}
.boder-box{
        width: 520.25px;
        height: 427px * @topx;
        border: 4px solid #FEB3A9;
        overflow: hidden;
}
 .tech-board{
        position: absolute;
        transform-style: preserve-3d;
        overflow: auto;
        overflow-x: hidden;
        scrollbar-color: rgba(66, 58, 58, 0.51);
        margin: 10px;
        width:500.25px;
        height: 400px * @topx;

        background: rgba(179, 57, 47, 0.6);
    }
    .tech-board::-webkit-scrollbar{
        width: 8px;
    }
    /* 内部内容 */
    .img{
        position: absolute;
        width: 120px;
        height: 117.65px;

        background: url('../../../assets/img/tech-research.png');

    }
    .text{
        padding: 10%;
        animation: text-focus-in 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    }
    /* 具体的小盒子 */
    .box1,.box2,.box3,.box4,.box5,.box6,.box7
    {
        position: relative;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;

        box-sizing: border-box;

        color: #FFFFFF;

    }
    .box11,.box22,.box33,.box44,.box55,.box66,.box77,.flex{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .box1{
        position: absolute;
        top: 4.54px;
        left: 5.8px;

        width: 160px;
        height: 196px;
       
        background: rgba(223, 64, 54, 0.3);
    }
    .box11{
        position: absolute;
        top: 0;
        left: 0;

        width: 160px;
        height: 196px;
        box-sizing: border-box;
    }
    .box2{
        position: absolute;
        top: 4.54px;
        left: 172.8px;

        width: 114px;
        height: 121px;

        background: rgba(187, 46, 50, 0.8);
    }
    .box22{
        position: absolute;
        top: 0;
        left: 0;

        width: 114px;
        height: 121px;
    }
    .box3{
        position: absolute;
        top: 4.54px;
        left: 294.8px;


        width: 198px;
        height: 121px;

        background: rgba(235, 159, 116, 0.3);
    }
    .box33{
        position: absolute;
        top: 0;
        left: 0;

        width: 198px;
        height: 121px;
        box-sizing: border-box;
    }
    .box4{
        position: absolute;

        top: 207.54px;
        left: 5.8px;

        width: 160px;
        height: 169px;

        background: rgba(228, 189, 160, 0.4);
    }
    .box44{
        position: absolute;
        top: 0;
        left: 0;

        width: 160px;
        height: 169px;
        box-sizing: border-box;
    }
    .box5{
        position: absolute;

        left: 172.8px;
        top: 132.54px;

        width: 160px;
        height: 244px;

        background: rgba(250, 193, 131, 0.6);
    }
    .box55{
        position: absolute;
        top: 0;
        left: 0;

        width: 160px;
        height: 244px;
        box-sizing: border-box;
    }
    .box6{
        position: absolute;

        left: 339.8px;
        top: 132.54px;

        width: 153px;
        height: 118px;

        background: rgba(224, 68, 58, 0.6);
    }
    .box66{
        position: absolute;
        top: 0;
        left: 0;

        width: 153px;
        height: 118px;
        box-sizing: border-box;
    }
    .box7{
        position: absolute;

        left: 339.8px;
        top: 256.54px;

        width: 153px;
        height: 120px;

        background: rgba(206, 87, 79, 0.8);
    }
    .box77{
        position: absolute;
        top: 0;
        left: 0;

        width: 153px;
        height: 120px;
        box-sizing: border-box;
    }

    /* 字体动画 */
    @keyframes text-focus-in {
        0% {
            -webkit-filter: blur(12px);
            filter: blur(12px);
            opacity: 0;
        }
        100% {
            -webkit-filter: blur(0px);
            filter: blur(0px);
            opacity: 1;
        }
    }
    /* 阴影 */
    @keyframes text-shadow-pop-bottom {
        0% {
            text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555,
            0 0 #555555, 0 0 #555555, 0 0 #555555;
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
        100% {
            text-shadow: 0 1px #555555, 0 2px #555555, 0 3px #555555, 0 4px #555555,
            0 5px #555555, 0 6px #555555, 0 7px #555555, 0 8px #555555;
            -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
        }
    }
    /* 翻转 */
    @keyframes flip-vertical-right {
        0% {
            transform: rotateY(0);
        }
        100% {
            transform: rotateY(360deg);
        }
    }
    .hover-animate:hover{
        transform: scale(1.2);
        opacity: 0.9;
        animation: flip-vertical-right 1.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
        
    }
    .hover-animate{
        transition: all;
    }
    /* 向下滚动的内容 */
    .second{
        position: absolute;
        height: 384.72px;

        top: 376.54px;
    }
    /* 正反翻转 */
    .box .front{
        width: 100%;
        height: 100%;
        text-align: center;

        transform: perspective(800px) rotateY(0deg);
        backface-visibility: hidden;
        transition: all 500ms ease;
    }
    .box .back{
        width: 100%;
        height: 100%;
        text-align: center;
        transform: rotateY(180deg);
        backface-visibility: hidden;
        transition: all 500ms ease;
    }
    .box:hover .front {
        transform: perspective(800px) rotateY(180deg);
    }
    .box:hover .back {
        transform: perspective(800px) rotateY(0deg);
    }
</style>